<template>
	<view class="pd30 bg-w">
		<view class="unicard-detail-banner">
			<image class="bdr16" :src="'#FFFFFF'"></image>
		</view>
		
	
		<view class="mt30 bg-w bdr16 pd40 box-shadow unicard-info">
			<image class="unicard-info-img" :src="'#F0F0F0'"></image>
			<view @click="showAlert = true" class="unicard-info-explain iconfont iconbtn_question"></view>
			<view class="unicard-info-content">
				<view class="flex alcenter">
					<text class="ft18 ftw600 text-default">我要有培训联盟卡</text>
					<text class="tag-unicard-cat ml20">教育培训</text>
				</view>
				<view class="mt40 flex alcenter">
					<view class="col3 text-center">
						<view class="ft18 ftw600 text-default">
							20个
						</view>
						<view class="ft14 text-info mt20">商户数</view>
					</view>
					<!-- <view class="col3 text-center bdlt">
						<view class="ft18 ftw600 text-default">
							20个
						</view>
						<view class="ft14 text-info mt20">免费套餐数</view>
					</view> -->
					<view class="col3 text-center bdlt">
						<view class="ft18 ftw600 text-default">
							20张
						</view>
						<view class="ft14 text-info mt20">代金券</view>
					</view>
					<view class="col3 text-center bdlt">
						<view class="ft18 ftw600 text-default">
							永久有效
						</view>
						<view class="ft14 text-info mt20">有效期</view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<unio2o-unicard-role-coupon-alert  @closed="showAlert = false" :show="showAlert"></unio2o-unicard-role-coupon-alert>
 -->		<unio2o-unicard-role-tuan-alert @closed="showAlert = false" :show="showAlert"></unio2o-unicard-role-tuan-alert>	
		<view class="mt50">
			<unio2o-unicard-mine-tuan></unio2o-unicard-mine-tuan>
		</view>
		<view class="mt50">
			<unio2o-unicard-mine-coupon></unio2o-unicard-mine-coupon>
		</view>
		
		<view class="unicard-send flex center">
			<view class="unicard-send-main flex center alcenter">
				<image :src="''"></image>
				<text class="ft14 text-w ml20">张华送你一张联盟卡</text>
			</view>
		</view>
		<view class="unicard-mine-footer-h"></view>
		<view class="unicard-mine-footer box-shadow-top bg-w flex center alcenter">
			<view class="btn-get ft18 ftw600 text-w flex center alcenter">确定领取</view>
		</view>
	</view>
</template>

<script>
	
	import unio2oUnicardRoleCouponAlert from '@/components/module/unicard/roleCoupon.vue'; 
	import unio2oUnicardRoleTuanAlert from '@/components/module/unicard/roleTuan.vue';
	import unio2oUnicardMineTuan from '@/components/module/unicard/mine/tuan.vue';
	import unio2oUnicardMineCoupon from '@/components/module/unicard/mine/coupon.vue';
	import unio2oQrcode from '@/components/base/qrcode/qrcode.vue';
	export default{
		components:{
			unio2oQrcode,
			unio2oUnicardRoleCouponAlert,
			unio2oUnicardRoleTuanAlert,
			unio2oUnicardMineTuan,
			unio2oUnicardMineCoupon
		},
		data(){
			return {
				showAlert:false
			}
		}
	}
</script>

<style>
	.unicard-send{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: calc(164rpx + env(safe-area-inset-bottom));
	}
	.unicard-send-main{
		height: 80rpx;
		padding: 0 10rpx;
		border-radius: 40rpx;
		background: rgba(0,0,0,.5);
	}
	.unicard-send-main image{
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		border:2rpx solid #FFFFFF
	}
	.unicard-mine-footer-h{
		height: calc(144rpx + env(safe-area-inset-bottom));
	}
	.unicard-mine-footer{
		height: calc(144rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		z-index: 10;
		width: 100%;
		left: 0;
		bottom: 0;
	}
	.unicard-mine-footer .btn-get{
		width:690rpx;
		height:96rpx;
		background:linear-gradient(135deg,rgba(255,143,85,1) 0%,rgba(255,104,92,1) 100%);
		border-radius:48rpx;
	}
	.uncard-detail-action{
		height:200rpx;
		background:linear-gradient(135deg,rgba(255,143,85,1) 0%,rgba(255,104,92,1) 100%);
		box-shadow:0rpx 8rpx 32rpx 0rpx rgba(255,104,92,0.3);
	}
	.unicard-save{
		background:linear-gradient(90deg,rgba(255,107,130,1) 0%,rgba(255,139,114,1) 100%);
		height: 40rpx;
		padding: 0rpx 10rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color:#FFFFFF;
	}
	.unicard-save image{
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
	
	.unicard-footer-h{
		height: 140rpx;
	}
	.unicard-footer{
		height: 140rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.unicard-detail-buy{
		width:320rpx;
		height:96rpx;
		background:linear-gradient(135deg,rgba(255,143,85,1) 0%,rgba(255,104,92,1) 100%);
		border-radius:48rpx;
		text-align: center;
		line-height: 96rpx;
		font-weight: 600;
		font-size: 36rpx;
		color:#FFFFFF;
	}
	.tag-unicard-cat{
		padding: 4rpx 12rpx;
		border:2rpx solid #CCCCCC;
		color:#999999;
		font-size: 24rpx;
		border-radius: 4rpx;
	}
	.unicard-detail-banner{
		height: 344rpx;
		width: 100%;
	}
	.unicard-detail-banner image{
		width: 100%;
		height: 344rpx;
	}
	.unicard-info{
		position: relative;
		overflow: hidden;
	}
	.unicard-info-img{
		width: 184rpx;
		height: 184rpx;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
	}
	.unicard-info-explain{
		font-size: 48rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		z-index: 3;
		color:#FF6D00;
	}
	.unicard-info-content{
		position: relative;
		z-index: 2;
	}
</style>